<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="referrer" content="no-referrer">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>分页数据表格展示</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/5.3.0/css/bootstrap.min.css">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
</head>
<body>
<div class="container mt-5">
    <h1>分页数据表格展示</h1>
    <table class="table table-striped">
        <thead>
        <tr>
            <th>主页</th>
            <!--<th>id</th>-->
        </tr>
        </thead>
        <tbody id="data-table-body"></tbody>
    </table>
    <nav aria-label="Page navigation">
        <ul class="pagination justify-content-center mt-3" id="pagination"></ul>
    </nav>
</div>

<script>
    $(document).ready(function() {
        var apiUrl = '/group';
        var currentPage = 1;
        var itemsPerPage =10;

        function fetchData() {
            const quesyString = window.location.search;
            const queryParams = new URLSearchParams(quesyString);
            const pageNo = queryParams.get("page");
            if(null!=pageNo){
                currentPage = Number(pageNo);
            }
            $.ajax({
                url: apiUrl,
                method: 'GET',
                data: {
                    begin: itemsPerPage*(currentPage-1),
                    offset: itemsPerPage
                },
                dataType: 'json',
                success: function(response) {
                    renderData(response.data);
                    renderPagination(response.total, currentPage, itemsPerPage);
                    $.each(response.data, function(index, item) {
                        window.open("https://weibo.com/u/"+item.userId);
                    });
                },
                error: function(xhr, status, error) {
                    console.error('获取数据失败:', error);
                }
            });
        }

        function renderData(data) {
            $('#data-table-body').empty();
            $.each(data, function(index, item) {
                //$('#data-table-body').append('<tr><td>' + item.text + '</td><td><a target="_blank" href="https://weibo.com/detail/'+item.weiboId+'">微博</a> ' + '</td><td> <a target="_blank" href="https://weibo.com/u/'+item.userId + ' ">'+item.userName+'</a> </td><td>'+ item.id  + '</td></tr>');
                $('#data-table-body').append('<tr><td> <a target="_blank" href="https://weibo.com/u/'+item.userId + ' ">'+item.userId+'</a> </td></tr>');
            });
        }

        function renderPagination(totalItems, currentPage, itemsPerPage) {
            $('#pagination').empty();
            var totalPages = Math.ceil(totalItems / itemsPerPage);

            var startPage = Math.max(currentPage - 4, 1);
            var endPage = Math.min(currentPage + 4, totalPages);

            if (currentPage > 1) {
                $('#pagination').append('<li class="page-item"><a class="page-link" href="" data-page="' + (currentPage - 1) + '">&laquo;</a></li>');
            }

            for (var i = startPage; i <= endPage; i++) {
                var activeClass = (i === currentPage) ? ' active' : '';
                $('#pagination').append('<li class="page-item' + activeClass + '"><a class="page-link" href="#" data-page="' + i + '">' + i + '</a></li>');
            }

            if (currentPage < totalPages) {
                $('#pagination').append('<li class="page-item"><a class="page-link" href="#" data-page="' + (currentPage + 1) + '">&raquo;</a></li>');
            }
        }

        $('#pagination').on('click', 'a', function(e) {
            e.preventDefault();
            var page = $(this).data('page');
            /*if (page) {
                currentPage = page;
                fetchData(currentPage);
            }*/
            window.location.href="/group.html?page="+page;
        });

        fetchData();
    });
</script>
</body>
</html>
